<template>
  <div v-if="sliders.length" id="slider">
    <div class="window" @mouseover="stop" @mouseleave="play">
      <ul class="container" :style="containerStyle" >
        <li style="border: solid 2px red;">
          <el-card shadow="hover" :body-style="{ padding: '0px' }" :style="{width:imgWidth+'px'}">
            <div>
              <img src="../image/icon.png" class="image" title="“点我查看详情”"/>
              <el-button type="text" class="button" @click="emlDetail(item)">查看详情</el-button>
            </div>
            <div style="padding: 3px;">
              <el-row :gutter="10">
                <el-col :span="6">
                  <span class="CSS5-left">标题 :</span>
                  <span style="color:#00F;float:left" v-html="sliders[0].subject"></span>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="6">
                  <span class="CSS5-left">发件人 :</span>
                  <span v-html="sliders[0].senderName"></span>
                </el-col>
              </el-row>
            </div>
            <div style="padding: 3px;">
              <div class="bottom clearfix">
                <time class="time" >发送时间{{ sliders[0].senderDate }}</time>
              </div>
            </div>
          </el-card>
        </li>
        <li v-for="(item, index) in sliders" :key="index" style="border: solid 2px red;">
          <el-card shadow="hover" :body-style="{ padding: '0px' }" :style="{width:imgWidth+'px'}">
            <div class="image">
              <img src="../image/icon.png" title="“点我查看详情”"/>
              <el-button type="text" class="button" @click="emlDetail(item)">查看详情</el-button>
            </div>
            <div style="padding: 3px;">
              <el-row :gutter="10">
                  <span class="CSS5-left">标题 ：</span>
                  <span style="color:#00F;" v-html="item.subject"></span>
              </el-row>
              <el-row :gutter="10">
                  <span class="CSS5-left">发件人 :</span>
                  <span v-html="item.senderName"></span>
              </el-row>
            </div>
            <div style="padding: 3px;">
              <div class="bottom clearfix">
                <time class="time">发送时间{{ item.senderDate }}</time>
              </div>
            </div>
          </el-card>
        </li>
        <li style="border: solid 2px red;">
          <el-card shadow="hover" :body-style="{ padding: '0px' }" :style="{width:imgWidth+'px'}">
            <div>
              <img src="../image/icon.png" class="image"  title="“点我查看详情”"/>
              <el-button type="text" class="button" @click="emlDetail(item)">查看详情</el-button>
            </div>
            <div style="margin: 3px;">
              <el-row :gutter="10">
                <el-col :span="6">
                  <p class="CSS5-left">标题 :</p>
                </el-col>
                <el-col :span="12">
                <p style="color:#00F;float:left" v-html="sliders[sliders.length-1].subject"></p>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="6">
                  <span class="CSS5-left">发件人 :</span>
                  <span v-html="sliders[sliders.length-1].senderName"></span>
                </el-col>
              </el-row>
            </div>
            <div style="padding: 3px;">
              <div class="bottom clearfix">
                <time class="time">发送时间{{ sliders[sliders.length-1].senderDate }}</time>
              </div>
            </div>
          </el-card>
        </li>
      </ul>
      <ul class="direction">
        <li class="left" @click="move(imgWidth, 1, speed)">
          <svg
            class="icon"
            width="30px"
            height="30.00px"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              fill="#ffffff"
              d="M481.233 904c8.189 0 16.379-3.124 22.628-9.372 12.496-12.497 12.496-32.759 0-45.256L166.488 512l337.373-337.373c12.496-12.497 12.496-32.758 0-45.255-12.498-12.497-32.758-12.497-45.256 0l-360 360c-12.496 12.497-12.496 32.758 0 45.255l360 360c6.249 6.249 14.439 9.373 22.628 9.373z"
            />
          </svg>
        </li>
        <li class="right" @click="move(imgWidth, -1, speed)">
          <svg
            class="icon"
            width="30px"
            height="30.00px"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              fill="#ffffff"
              d="M557.179 904c-8.189 0-16.379-3.124-22.628-9.372-12.496-12.497-12.496-32.759 0-45.256L871.924 512 534.551 174.627c-12.496-12.497-12.496-32.758 0-45.255 12.498-12.497 32.758-12.497 45.256 0l360 360c12.496 12.497 12.496 32.758 0 45.255l-360 360c-6.249 6.249-14.439 9.373-22.628 9.373z"
            />
          </svg>
        </li>
      </ul>
      <ul class="dots">
        <li
          v-for="(dot, i) in sliders"
          :key="i"
          :class="{dotted: i === (currentIndex-1)}"
          @click="jump(i+1)"
        ></li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "slider",
  props: {
    //渲染速度，正比
    initialSpeed: {
      type: Number,
      default: 30
    },
    //切换速度，反比
    initialInterval: {
      type: Number,
      default: 1
    },
    sliders: {
      type: Array,
      default: () => {
        return [
          {
            subject: "我心飞翔1",
            senderName: "飞人",
            senderDate: "2020/1/1"
          },
          {
            subject: "我心飞翔2",
            senderName: "飞人",
            senderDate: "2020/1/1"
          },
          {
            subject: "我心飞翔3",
            senderName: "飞人",
            senderDate: "2020/1/1"
          },
          {
            subject: "我心飞翔4",
            senderName: "飞人",
            senderDate: "2020/1/1"
          },
          {
            subject: "我心飞翔5",
            senderName: "飞人",
            senderDate: "2020/1/1"
          }
        ];
      }
    }
  },
  data() {
    return {
      // imgWidth和distance相等值
      imgWidth: 300,
      distance: -300,
      currentIndex: 1,
      transitionEnd: true,
      speed: this.initialSpeed
    };
  },
  computed: {
    containerStyle() {
      return {
        transform: `translate3d(${this.distance}px, 0, 0)`
      };
    },
    interval() {
      return this.initialInterval * 1000;
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    emlDetail(passObject) {
      console.log("passObject",passObject);
      this.$router.push({
        path: "/backhome/scrollpicture/detail_eml",
        query: {
          emlIndex: passObject
        }
      });
    },
    init() {
      this.play();
      window.onblur = function() {
        this.stop();
      }.bind(this);
      window.onfocus = function() {
        this.play();
      }.bind(this);
    },
    move(offset, direction, speed) {
      console.log(speed);
      if (!this.transitionEnd) return;
      this.transitionEnd = false;
      direction === -1
        ? (this.currentIndex += offset / this.imgWidth)
        : (this.currentIndex -= offset / this.imgWidth);
      if (this.currentIndex > this.sliders.length) this.currentIndex = 1;
      if (this.currentIndex < 1) this.currentIndex = this.sliders.length;

      const destination = this.distance + offset * direction;
      this.animate(destination, direction, speed);
    },
    animate(des, direc, speed) {
      if (this.temp) {
        window.clearInterval(this.temp);
        this.temp = null;
      }
      this.temp = window.setInterval(() => {
        if (
          (direc === -1 && des < this.distance) ||
          (direc === 1 && des > this.distance)
        ) {
          this.distance += speed * direc;
        } else {
          this.transitionEnd = true;
          window.clearInterval(this.temp);
          this.distance = des;
       /*    if (des < -3000) this.distance = -600
          if (des > -600) this.distance = -3000 */
             if (des < -(this.imgWidth*this.sliders.length)) this.distance = -(this.imgWidth)
          if (des >  -(this.imgWidth)) this.distance = -(this.imgWidth*this.sliders.length)

        }
      }, 20);
    },
    jump(index) {
      const direction = index - this.currentIndex >= 0 ? -1 : 1;
      const offset = Math.abs(index - this.currentIndex) * (this.imgWidth);
      const jumpSpeed =
        Math.abs(index - this.currentIndex) === 0
          ? this.speed
          : Math.abs(index - this.currentIndex) * this.speed;
      this.move(offset, direction, jumpSpeed);
    },
    play() {
      if (this.timer) {
        window.clearInterval(this.timer);
        this.timer = null;
      }
      this.timer = window.setInterval(() => {
        this.move(this.imgWidth, -1, this.speed);
      }, this.interval);
    },
    stop() {
      window.clearInterval(this.timer);
      this.timer = null;
    },
  }
};
</script>


<style scoped>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
ol,
ul {
  list-style: none;
}
#slider {
  text-align: center;
}
/* window只是轮播容器大小，与图片无关 
        图片的尺寸对应于
        imgWidth:600, 
        distance:-600,*/
.window {
  position: relative;
  width: 100%;
  height: 150px;
  margin: 0 auto;
  overflow: hidden;
}
.el-card {
  height: 140px;
}
.container {
  display: flex;
  position: absolute;
}
.left,
.right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  cursor: pointer;
}
.left {
  left: 0%;
  padding-left: 12px;
  padding-top: 10px;
}
.right {
  right: 0%;
  padding-right: 12px;
  padding-top: 10px;
}
/* .top{
        top:3%;
        padding-left:12px;
        padding-top:10px;
      }
      .bottom{
        bottom:3%;
        padding-left:12px;
        padding-bottom:10px;
      } */
img {
  user-select: none;
}
.dots {
  width: 100%;
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
}
.dots li {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin: 0 3px;
  border: 1px solid white;
  border-radius: 50%;
  background-color: #333;
  cursor: pointer;
}
.dots .dotted {
  background-color: orange;
}

.image {
  width: 50px;
  height: 50px;
  /* width: 100%; */
  float: right;
}
.CSS5-left {
  float: left;
  border: 1px solid #f00;
}
.time {
  font-size: 13px;
  color: #999;
}
</style>